<template>
  <div v-if="info.equOperation" class="fen_card">
    <div class="fen_card_title">{{ info.equName }}</div>
    <div class="fen_card_l">
      <div class="fen_card_l_c">
        <div
          :class="{
            'text-navy': info.equOperation.runningStatus == 1,
            'text-danger': info.equOperation.trouble == 1
          }"
        >
          <div style="position: relative;">
            <!-- 站位图片 -->
            <img style="width: 100%;" src="">
            <svg-icon icon-class="fj_fan_status" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" />
          </div>
          <div style="margin-top: 10px;">
            <span v-if="info.equOperation.runningStatus == 1">运行中</span>
            <span v-else>停止</span>
            <span v-if="info.equOperation.trouble == 1">故障</span>
          </div>
        </div>
        <div style="margin-top:18px;">
          <el-button type="primary" plain size="mini" style="width:100%" @click="handleDetails()">查看详情</el-button>
        </div>
        <div style="margin-top:10px;">
          <el-button v-hasPermi="['fen:singleControl:control']" type="primary" plain size="mini" style="width:100%" @click="handleControl">风机控制</el-button>
        </div>
      </div>
    </div>
    <div class="fen_card_info">
      <el-form ref="form" label-width="80px" size="mini" label-suffix=":">
        <el-form-item label="设备名称" style="margin-bottom:0;">
          <el-tooltip :content="info.equName" placement="top-start"><div class="text-cut">{{ info.equName }}</div></el-tooltip>
        </el-form-item>
        <el-form-item label="设备位置" style="margin-bottom:0;">
          <el-tooltip :content="info.locationName" placement="top-start"><div class="text-cut">{{ info.locationName }}</div></el-tooltip>
        </el-form-item>
        <el-form-item label="运行模式" style="margin-bottom:0;">
          <span v-if="info.equOperation.operatingMode == 0">手动</span>
          <span v-if="info.equOperation.operatingMode == 1">自动</span>
          <!-- <el-tooltip :content="info.equOperation.operatingMode+''" placement="top-start"><span class="text-cut">{{ info.equOperation.operatingMode }}</span></el-tooltip> -->
        </el-form-item>
        <el-form-item label="风机故障" style="margin-bottom:0;">
          <span v-if="info.equOperation.trouble == 0">正常</span>
          <span v-if="info.equOperation.trouble == 1">故障</span>
          <!-- <el-tooltip :content="info.equOperation.trouble+''" placement="top-start"><span class="text-cut">{{ info.equOperation.trouble }}</span></el-tooltip> -->
        </el-form-item>
        <el-form-item label="运行频率" style="margin-bottom:0;">
          <el-tooltip :content="info.equOperation.frequency+''" placement="top-start"><span class="text-cut">{{ info.equOperation.frequency }}Hz</span></el-tooltip>
        </el-form-item>
        <el-form-item label="风机电流" style="margin-bottom:0;">
          <el-tooltip :content="info.equOperation.electricCurrent+''" placement="top-start"><span class="text-cut">{{ info.equOperation.electricCurrent }}A</span></el-tooltip>
        </el-form-item>
        <!-- <el-form-item label="出口流速" style="margin-bottom:0;">
          <el-tooltip :content="info.locationName" placement="top-start"><span class="text-cut">{{ info.equOperation.electricTension }}</span></el-tooltip>
        </el-form-item> -->
        <!-- <el-form-item label="设备电压" style="margin-bottom:0;">
          <el-tooltip :content="info.equOperation.electricTension" placement="top-start"><span class="text-cut">{{ info.equOperation.electricTension }}V</span></el-tooltip>
        </el-form-item> -->
        <!-- <el-form-item label="震动值" style="margin-bottom:0;">
          <el-tooltip :content="info.equOperation.vibrationValue" placement="top-start"><span class="text-cut">{{ info.equOperation.vibrationValue }}mm/s</span></el-tooltip>
        </el-form-item> -->
      </el-form>
    </div>
    <!-- <Control ref="control" />
    <Details ref="Details" /> -->
  </div>
</template>

<script>
// import Control from './Control.vue'
// import Details from './Details.vue'
export default {
  components: {
    // Control,
    // Details
  },
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    handleControl() {
      this.$emit('control')
      // this.$refs.control.open({
      //   id: this.info.id
      // })
    },
    handleDetails(row) {
      this.$emit('details')
      // this.$refs.Details.handleView(this.info)
    }
  }
}
</script>

<style lang="scss" scoped>
.fen_card {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: flex-end;
    width: 320px;
    height: 258px;
    background-image: url('~@/assets/images/statistics/bg.png');
    background-size: cover;
    padding-top: 13.8%;
    padding-bottom: 5.5%;
    border: 1px solid #e6ebf5;
    border-radius: 2px;
    // overflow: hidden;
   .fen_card_title {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 15px;
        font-weight: 500;
        color: #FFFFFF;
        height: 25%;
        padding: 5px 10.7% 0 10px;
        background-image: url('./tit_bg.png');
        background-size: 100% 100%;
        z-index: 1;
   }
   .fen_card_l {
        // width: 128px;
        // display: flex;
        // align-items: flex-end;
        // justify-content: center;
        // box-sizing: border-box;
        flex: 0 0 34%;
        padding: 0 6.6%;
        text-align: center;
        color: #AAAAAA;
        .success {
          color: var(--color-success);
        }
        .error {
          color: var(--color-danger);
        }
        // .fen_card_l_c {
        //   max-width: 80px;
        // }
   }
   .fen_card_info {
      box-sizing: border-box;
      max-width: 66%;
      flex: 1;
      padding:0 16px 0 4%;
      &::v-deep {
        .el-form-item__label {
          color: #888;
          font-size: 13px;
          // text-align:justify;
        }
      }
   }
}
</style>
